<template>
	<view class="home-container">
    <!-- 搜索框 -->
    <!-- <view class="search-box">
      <view class="search">
        <uni-icons type="search" size="16"></uni-icons>
        <text>搜索</text>
      </view>
    </view> -->
    <my-search @click="gotoSearch" ></my-search>
    <!-- 轮播图 -->
    <view class="swiper-box">
      <swiper autoplay="true" duration="2000" circular="true" indicator-dots="true">
        <swiper-item v-for="(item,i) in swiperList" :key="i" @click="gotoGoodsDetail(item.goods_id)">
          <image :src="item.image_src"></image>
        </swiper-item>
      </swiper>
    </view>
    <!-- 分类区域 -->
    <view class="cate-title">
      <view class="cate-title-box" v-for="(item,i) in cateList" :key="i" @click="cateChickHandler(item)">
        <image :src="item.image_src"></image>
        <!-- <text>{{item.name}}</text> -->
      </view>
    </view>
    <!-- 楼层区域 -->
    <view class="cate-box">
      <view class="cate-box-item" v-for="(item1,i1) in floorList" :key = "i1">
        <view class="title">
          <image :src="item1.floor_title.image_src"></image>
        </view>
       <view class = "florr">
          <navigator class="left" :url="item1.product_list[0].navigator_url">
            <image :src="item1.product_list[0].image_src"></image>
          </navigator>
          <view class="right">
            <image :src="item2.image_src" v-for="(item2, i2) in item1.product_list" :key="i2" v-if="i2 > 0" @click="gotoGoodsList(item2.navigator_url)"></image>
          </view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
    onLoad() {
      this.getSwiperList()
      this.getCateList()
      this.getFloorList()
    },
    methods:{
      gotoSearch(){
        // console.log("页面中的点击函数")
        uni.navigateTo({
          url:'../../subpkg/search/search'
        })
      },
      async getSwiperList() {
        const{data: res} = await uni.$http.get('/api/public/v1/home/swiperdata');
        if(res.meta.status !== 200) return uni.$showMsg()
        this.swiperList = res.message;
      },
      async getCateList() {
        const {data: res} = await uni.$http.get("/api/public/v1/home/catitems");
         console.log(res)
        if(res.meta.status !== 200) return uni.$showMsg();
        this.cateList = res.message;
      },
      async getFloorList(){
        const {data: res} = await uni.$http.get("/api/public/v1/home/floordata")
        if(res.meta.status !== 200) return uni.$showMsg()
        res.message.forEach(floor => {
            floor.product_list.forEach(prod => {
              prod.navigator_url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split("?")[1];
            })
        });
        console.log("floor",res.message)
        this.floorList = res.message;
      },
      gotoGoodsDetail(goods_id){
        uni.navigateTo({
          url:"/subpkg/goods_detail/goods_detail?goods_id=" + goods_id
        })
      },
      cateChickHandler(item){
        console.log("触发点击事件",item)
        
        if(item && item.name === '分类') {
          uni.switchTab({
            url:'/pages/cate/cate'
          })
        }
      },
      gotoGoodsList(url){
        uni.navigateTo({
          url: url
        })
      },
    },
		data() {
			return {
				swiperList:[],
        cateList:[],
        floorList:[],
			};
		}
	}
</script>

<style lang="scss">
.home-container{
  margin: 0;
  padding: 0;
  height: 100%;
  .search-box{
    background-color: #c00000;
        padding: 10px 0;
    .search {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 5px 10px;
      padding: 10px;
      background-color: #FFFFFF;
      border-radius: 20px;
    }
    
  }
  .swiper-box{
    image {
      width: 100%;
      height: 100%;
    }
  }
  .cate-title{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 20rpx;
    .cate-title-box{
      image {
        height: 130rpx;
        width: 130rpx;
      }
    }
  }
  .cate-box{
    .cate-box-item{
      .title{
        image {
          height: 60rpx;
          width: 90%;
        }
      }
      .florr{
        display: flex;
        padding: 10rpx;
        width: 100%;
        .left{
          width: 33%;
          padding-right: 10rpx;
          image{
            height: 480rpx;
            width: 100%;
           }
        }
        .right{
          display: flex;
          align-items: center;
          width: 66%;
          flex-wrap: wrap;
          image{
            height: 226rpx;
            width: 45%;
            padding:10rpx 5rpx;
          }
        }
      }
    }
  }
}

</style>
